<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  html, body {
       position: relative;
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       background: #dddee1;
       overflow: hidden;
   }
   #oc {

       background: #EEE;
       margin: 0 auto;

   }

  </style>
 </head>
 <body>
  <canvas id="oc" width="500" height="300"></canvas>
  <!-- <button id="btn2">重置222</button> -->
 </body>
 <script>


 // 重置




    // 获取canvas节点
    let testNode = document.getElementById('oc');
   // 判断是否支持
   if(testNode.getContext){

     var isSign = false;
    var ctx = testNode.getContext("2d")
    testNode.onmousedown = function(ev){
     var ev = ev || event;
     ctx.beginPath();
     ctx.moveTo(ev.clientX - this.offsetLeft,ev.clientY - this.offsetTop);

      isSign = true

     if(testNode.setCapture){
      testNode.setCapture(); // 对鼠标进行捕获
     }
     document.onmousemove = function(ev){
      var ev = ev || event;
      ctx.lineWidth='3';//边框宽度
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.lineTo(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop); // 绘制线条
      ctx.stroke() // 绘制路劲
      // console.log(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop)
     }
     document.onmouseup = function(){
      document.onmousemove = document.οnmοuseup=null;
      if(document.releaseCapture){
       document.releaseCapture(); // 释放对鼠标的捕获
      }
     }
     // 禁止事件的默认行为  处理拖拽在主流浏览器内的兼容问题
     return false;
    }
   }






   // btn2.addEventListener('click',function(){
   //   testNode.getContext("2d").clearRect(0, 0, testNode.width, testNode.height); // 清空画布
   // });

   function clearcanvas(){
     isSign = false
     testNode.getContext("2d").clearRect(0, 0, testNode.width, testNode.height); // 清空画布
   }

   function savecanvas() {
          let returnImg = testNode.toDataURL("image/png");
          return returnImg

   }



 </script>
</html>
